<template>
  <div>
    <div id="main" :style="{ width: '100%', height: height }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myChart: null,
      // 准备数据（模拟后端返回）
      lane1: [100, 150, 200],
      lane2: [150, 50, 100],
      lane3: [10, 50, 30],
      gantry: [1000, 1500, 200],

    }
  },
  mounted() {
    this.getEcharts()
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    if (!this.myCharts) {
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myCharts.dispose()
    this.myCharts = null
  },
  methods: {
    // 设置容器以及数据配置 
    getEcharts() {
      this.myChart = echarts.init(document.getElementById("main"));
      var data1 = [132, 324, 327, 452, 365, 145, 326];
      var data2 = [7.2, -2.6, 4.7, -3.7, -5.4, -0.5, 3.4];
      //定义两个上下箭头的矢量路径
      var up = "path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z";
      var down =
        "path://M216.969,292l16.025-3L203,334l-29.994-45,16.041,3,13.961-69Z";
      //遍历data2里面元素的正负定义一个矢量路径的数组
      var path = [up, down, up, down, down, down, up];
      this.myChart.setOption({
        color: ["#3398DB"],
        legend: {
          data: ['直接访问'],
          top: 5, // 距离顶部的位置
          left: 'right',
          textStyle: {
            color: '#000' // 字体颜色
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params){
            let ele = ''
            if(Array.isArray(params) && params.length){
              params.forEach(item=>{
                if(item.seriesName){
                  ele +=`<div style='padding-bottom: 4px'>${ item.seriesName}<div>`
                  ele += item.marker
                  ele += `<span style='padding-left: 10px'>${ item.value}<span>`
                }
              })
            }
            return ele
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          top:'12%'
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbol: function (data, params) {
              return path[params.dataIndex];
            },
            symbolSize: [6, 18],
            symbolOffset: [15, -20],
            color: "orange",
            symbolPosition: "end",
            label: {
              show: true,
              position: "top",
              formatter: function (params) {
                return data2[params.dataIndex];
              },
              fontSize: 12,
              fontWeight: "bold",
              color: "#34DCFF",
              offset: [0, 25] // 往下平移 10px  
            },
            data: data1,
          },
          {
            name: "直接访问",
            type: "bar",
            barWidth: "40%",
            data: data1,
          },
        ],
      })
    },
    // 页面缩放
    resize() {
      this.myChart.resize();
    },

  }
}
</script>

<style lang="sass" scoped>

</style>